<template>
  <view class="task_page">
    <template v-if="pageStatus === 'empty'">
      <status-page
        :status="pageStatus"
        customEmptyText="暂无内容"
        :fixed="false"
      ></status-page>
    </template>
    <template v-else>
      <scroll-view
        class="scroll_view"
        :scroll-with-animation="true"
        scroll-y
        :scroll-top="scrollView.scrollTop"
        :show-scrollbar="false"
        lower-threshold="30"
        @scroll="handleScroll"
        @scrolltolower="loadData"
      >
        <view class="list">
          <view
            v-for="(i, idx) in list"
            :key="idx"
            class="item"
            @click="handleTaskItem(1, i)"
          >
            <view class="header">
              <image
                src="https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/home_task.png"
                mode=""
                class="task_icon"
              ></image>
              <text>{{ i.title }}</text>
            </view>
            <view class="reward">
              <image
                v-for="(o, idx2) in i.rewardList"
                :key="idx2"
                :src="o.rewardImageUrl"
                mode=""
                class="reward_img"
              ></image>
            </view>
            <view class="date">
              <view class="range">
                任务有效期：{{ formatDate1(i.startTime, false) }}-{{
                  formatDate1(i.endTime, false)
                }}
              </view>
              <view class="send">
                {{ formatDate1(i.sendTime.replace(/-/g, "/"), true) }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
    <!-- 添加 -->
    <view class="add_care" @click="handleTaskItem(2, '')">
      <image
        src="https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/add_icon.png"
        mode=""
        class="add_icon"
      >
      </image>
    </view>
    <!-- 回到顶部 -->
    <view v-if="scrollView.oldScrollTop > 0" class="top" @click="handleBackTop">
      <image
        src="https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/backTop2.png"
        mode=""
        class="top_icon"
      >
      </image>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { getTaskListApi } from "@/api";
import { formatDate1 } from "@/hooks/useGlobal.js";
const timer = ref(null);
const pageStatus = ref();
const scrollView = ref({
  oldScrollTop: 0,
  scrollTop: 0,
});
const pageInfo = ref({
  pageSize: 10,
  pageNum: 1,
  total: 0,
});
const list = ref([]); // 任务列表

// 任务列表
async function fetchTaskList() {
  uni.showLoading({
    title: "加载中...",
  });
  let res = await getTaskListApi({
    ...pageInfo.value,
  });
  uni.hideLoading();
  if (res.code === 200) {
    pageInfo.value.total = res.total;
    if (res.total > 0) {
      pageStatus.value = "";
      for (let i in res.rows) {
        list.value.push({
          ...res.rows[i],
        });
      }
    } else {
      pageStatus.value = "empty";
    }
  }
}
// 新增
function handleTaskItem(type, item) {
  let details = encodeURIComponent(JSON.stringify(item));
  uni.navigateTo({
    url: `/pages/subpackage/home/TaskManage/taskItem?pageType=${type}&details=${details}`,
  });
}
// 回到顶部
function handleBackTop() {
  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    scrollView.value.scrollTop = scrollView.value.oldScrollTop;
    nextTick(() => {
      scrollView.value.scrollTop = 0;
    });
  }, 300);
}

function handleScroll(e) {
  e.stopPropagation();
  scrollView.value.oldScrollTop = e.detail.scrollTop;
}
// 加载更多
function loadData() {
  if (list.value.length < pageInfo.value.total) {
    pageInfo.value.pageNum++;
    fetchTaskList();
  }
}
onLoad(() => {
  list.value = [];
  pageInfo.value.pageNum = 1;
  fetchTaskList();
});
</script>

<style lang="scss" scoped>
.task_page {
  padding: 0 30rpx 0 30rpx;

  scroll-view ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }

  .scroll_view {
    overflow-y: auto;
    height: 100vh;

    .list {
      margin-top: 30rpx;

      .item {
        padding: 30rpx 30rpx 40rpx 30rpx;
        margin-bottom: 16rpx;
        border-radius: 20rpx;
        background-color: #fff;
        box-sizing: border-box;

        .header {
          display: flex;
          align-items: center;
          font-weight: 500;
          font-size: 32rpx;
          color: #333;
          line-height: 45rpx;

          .task_icon {
            margin-right: 10rpx;
            width: 45rpx;
            height: 45rpx;
          }
        }

        .reward {
          margin: 30rpx 0 16rpx 0;

          .reward_img {
            margin-right: 32rpx;
            width: 100rpx;
            height: 100rpx;
          }
        }

        .date {
          color: #666666;

          .range {
            margin-bottom: 30rpx;
            line-height: 40rpx;
            font-size: 28rpx;
          }

          .send {
            line-height: 36rpx;
            font-size: 26rpx;
          }
        }
      }
    }
  }

  .add_care {
    position: fixed;
    bottom: 316rpx;
    right: 30rpx;

    .add_icon {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .top {
    position: fixed;
    bottom: 186rpx;
    right: 30rpx;

    .top_icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
}
</style>
